<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>交易</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../../css/utils/mui.min.css">
	<style>
		.user-info {
			margin-top: 20px;
			text-align: center;
		}
		.user-info img {
			width: 52px;
			height: 52px;
			border-radius: 50%;
		}
		.user-info .nick-name {
			margin-top: 10px;
			font-size: 16px;
			color: #1F1F1F;
		}
		.content-body {
			position: fixed;
			top: 108px;
			bottom: 0;
			width: 100%;
			margin-top: 20px;
			border-top-left-radius: 14px;
			border-top-right-radius: 14px;
			background-color: #fff;
		}
		.prompt-title {
			padding-top: 26px;
			margin-left: 20px;
			font-size: 16px;
			color: #1F1F1F;
		}
		.transfer-price {
			margin: 0 20px;
		}
		.transfer-price span {
			vertical-align: middle;
			font-size: 30px;
			color: #1F1F1F;
		}
		.transfer-price input {
			/*display: inline-block;*/
			width: calc(100% - 35px);
			border: 0;
			font-size: 20px;
			border-bottom: 1px solid rgba(0,0,0,.2);
			border-radius: 0;
		}
		.pay-btn {
			position: fixed;
			top: 450px;
			left: 60px;
			right: 60px;
		}
		.pay-btn button {
			background: #FA2B3E;
			border-radius: 6px;
			font-size: 18px;
			color: #FFFFFF;
		}
	</style>
</head>
<body>
	<div class="mui-content">
		<div class="user-info">
			<img src="../../img/myClients/header_img.png" />
			<div class="nick-name"></div>
		</div>
		<div class="content-body">
			<div class="prompt-title">付款金额</div>
			<div class="transfer-price">
				<span>¥</span>
				<input id="goodsPrice" type="number" />
			</div>
			<div class="pay-btn">
				<button type="button" id="nowPay" class="mui-btn mui-btn-block">立即支付</button>
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/spin.min.js"></script>
	<script type="text/javascript" src="../../js/utils/boot.js?version=3" ></script>
	<script>
		mui.init();
		var openid = base.getParameter("openid");
		var customerId = base.getParameter("customerId");//支付用户ID
		var mcCustomerId,merchantId;//商户用户id和商户id
		$(function(){
			base.postData(base.url.getByOpenId, {openId:openid}, function(data){
				if (data.success) {
					mcCustomerId = data.context.customerId;
					merchantId = data.context.merchantId;
					$(".user-info img").attr("src", data.context.headImgUrl);
					$(".nick-name").html(data.context.nickName);
					initWX(data.context.companyId);
				}
			});
		});
		function initWX(companyID) {
			if (companyID == null || companyID == "") {
				companyID = 16;
			}
			//初始化微信
			base.initWX(companyID);
		}
			
		$("#nowPay").on('tap', function(){
			var goodsPrice = $("#goodsPrice").val();
			if (goodsPrice == "" || goodsPrice < 0.3) {
				mui.toast("金钱不能小于0.3");
				return;
			}
			base.weChatTransferPay({price:goodsPrice,customerId:customerId,mcCustomerId:mcCustomerId,merchantId:merchantId}, function(rse) {
				mui.toast("支付成功");
                $("#goodsPrice").val("");
			});
		});
	</script>
</body>
</html>
